<style>
#goods{}
#goods li {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    margin-bottom: 10px;
    width: 316px;
    text-align: left;
    background-color: #fff;
}
#goods li a{
color:#909090;
}
#goods li .quanhou,#goods li .xiaoliang{
  text-align: right;
}
#goods img{
  width: 100%;
  height: auto;
}
#goods .linquan{
  background: url(/static/bbs/images/t24.png) 0 0 no-repeat;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
#goods .title{
  border-bottom: 1px solid #eeeeee;
  padding: 5px;
  overflow:hidden;
  font-size: 12px;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.autoimg {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.autoimg img {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.red{color:#ff0000;}
.bai{color:#fff;}
.hong{color:#ff6b06;}
/* .fs14{font-size: 14px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
.fs22{font-size: 22px;} */
</style>
<link rel="stylesheet" type="text/css" href="/static/vendor/ion.rangeslider/css/ion.rangeSlider.css"/>
<link rel="stylesheet" type="text/css" href="/static/vendor/ion.rangeslider/css/ion.rangeSlider.skinModern.css"/>
<script src="/static/vendor/ion.rangeslider/js/ion-rangeSlider/ion.rangeSlider.min.js" type="text/javascript" charset="utf-8"></script>
<div class="layui-container">
  <blockquote class="layui-elem-quote">蚂蚁购: 您可以收缩淘宝商品的链接地址, 和商品的名称。这里能够查看商品是否有优惠<br>之后会开放会员淘宝客项目, 勾选商品转为自己的推广链接.</blockquote>
  <form class="layui-form" method="get" action="<?=url('myg/index')?>" id="form">
    <div class="layui-form-item">
      <label class="layui-form-label">关键词</label>
      <div class="layui-input-block">
        <input type="text" name="q" value="<?=$q?>" placeholder="粘贴宝贝标题或者输入关键词查券 (如:裙子)" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">佣金比例</label>
      <div class="layui-input-block">
        <input type="hidden" id="start_tk_rate" name="start_tk_rate" value="<?=$start_tk_rate?>">
        <input type="hidden" id="end_tk_rate" name="end_tk_rate" value="<?=$end_tk_rate?>">
        <input type="text" id="tk_rate">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">折后价</label>
      <div class="layui-input-block">
        <input type="hidden" id="start_price" name="start_price" value="<?=$start_price?>">
        <input type="hidden" id="end_price" name="end_price" value="<?=$end_price?>">
        <input type="text" id="price">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">平台</label>
        <div class="layui-input-inline" style="width:250px;">
          <div class="layui-col-lg6">
            <input type="radio" name="is_tmall" value="0" title="天猫+淘宝" <?php if(!$is_tmall):?>checked<?php endif;?>>
          </div>
          <div class="layui-col-lg6">
            <input type="radio" name="is_tmall" value="1" title="淘宝" <?php if($is_tmall):?>checked<?php endif;?>>
          </div>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">产地</label>
        <div class="layui-input-inline" style="width:250px;">
          <div class="layui-col-lg6">
            <input type="radio" name="is_overseas" value="0" title="国内商品" <?php if(!$is_overseas):?>checked<?php endif;?>>
          </div>
          <div class="layui-col-lg6">
            <input type="radio" name="is_overseas" value="1" title="海外商品" <?php if($is_overseas):?>checked<?php endif;?>>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-block">
        <input type="radio" name="sort" value="tk_rate_desc" title="佣金比例" <?php if($sort=='tk_rate_desc'):?>checked<?php endif;?>>
        <input type="radio" name="sort" value="tk_total_commi_desc" title="佣金最多" <?php if($sort=='tk_total_commi_desc'):?>checked<?php endif;?>>
        <input type="radio" name="sort" value="tk_total_sales_desc" title="推广最多" <?php if($sort=='tk_total_sales_desc'):?>checked<?php endif;?>>
        <input type="radio" name="sort" value="total_sales_desc" title="销量最多" <?php if($sort=='total_sales_desc'):?>checked<?php endif;?>>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit="" lay-filter="form">搜索</button>
      </div>
    </div>
  </form>
  <div class="layui-row" id="table">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
      <legend>产品列表</legend>
    </fieldset>
    <ul class="flow-default" id="goods">
    </ul>

  </div>
</div>
<script>
layui.use(['table','form','flow', 'util'], function(){
    var util = layui.util;
    var form = layui.form;
    var table = layui.table;
    var flow = layui.flow;
    var $ = layui.$;
    form.render('select');
    //搜索
    search = function(){
        flow.load({
          elem: '#goods' //流加载容器
          //,scrollElem: '#goods' //滚动条所在元素，一般不用填，此处只是演示需要。
          ,isAuto: false
          ,isLazyimg: true
          ,done: function(page, next){ //加载下一页
            var url = "/myg/index";
            var data = $("#form").find("[name]");
            var where = {};
            data.each(function(i,e){
                where[$(e).attr('name')] = $(e).val();
            });
                where['is_tmall'] = $("[name='is_tmall']:checked").val();
                where['is_overseas'] = $("[name='is_overseas']:checked").val();
                where['sort'] = $("[name='sort']:checked").val();
                where['page'] = page;
            $.ajax({
              url:url,
              type:'post',
              dataType:"json",
              data:where,
              success:function(rs){
                var html = rs.data.html;
                next(html, page<rs.data.page);
              }
            });
          }
        });
    };
    search();

    //顶部
    util.fixbar({
      click: function(type){
        console.log(type);
        if(type === 'bar1'){
          alert('点击了bar1')
        }
      }
    });
    //淘客佣金比例
    $("#tk_rate").ionRangeSlider({
        type: "double",
        min: 0,
        max: 100,
        grid: true,
        from: <?=$start_tk_rate?>,
        to: <?=$end_tk_rate?>,
        onFinish: function (data) {
          $("#start_tk_rate").val(data.from_pretty.replace(/\s/g, ""));
          $("#end_tk_rate").val(data.to_pretty.replace(/\s/g, ""));
        }
    });
    //折扣金额
    $("#price").ionRangeSlider({
        type: "double",
        min: 0,
        max: 20000,
        grid: true,
        from: <?=$start_price?>,
        to: <?=$end_price?>,
        onFinish: function (data) {
          $("#start_price").val(data.from_pretty.replace(/\s/g, ""));
          $("#end_price").val(data.to_pretty.replace(/\s/g, ""));
        }
    });

});
</script>
